<template>
  <div class="p-24">
    <a-card>
      <a-typography-title :level="4">用户信息</a-typography-title>
      <div class="d-flex">
        <a-image :width="200" objectFit="cover" :src="detail.avatar" />
        <div class="msg-list">
          <div>
            <span class="label">微信号</span>
            <span class="val">{{ detail.nickname }}</span>
          </div>
          <div>
            <span class="label">手机号</span>
            <span class="val">{{ detail.phone }}</span>
          </div>
          <!-- <div>
            <span class="label">性别</span>
            <span class="val">{{
              detail.sex == 0 ? "女" : detail.sex == 1 ? "男" : "未知"
            }}</span>
          </div> -->
          <!-- <div>
            <span class="label">年龄段</span>
            <span class="val">{{ detail.src }}</span>
          </div> -->
          <!-- <div>
            <span class="label">常用套餐</span>
            <span class="val">{{ detail.src }}</span>
          </div> -->
        </div>
      </div>
    </a-card>
    <a-card>
      <a-typography-title :level="4">自定义标签</a-typography-title>
      <template v-if="detail.personalityTag">
        <a-tag
          color="#87d068"
          v-for="item in detail.personalityTag?.split(',')"
          >{{ item }}</a-tag
        >
      </template>
      <span v-else>暂无标签</span>
    </a-card>
    <a-card>
      <a-typography-title :level="4">最近服务动态</a-typography-title>
      <BasicTable
        ref="basicTableRef"
        :immediate="false"
        :columns="columns"
        :query-params="queryData"
        :apiFetch="postFinancialBillOrderPage"
      >
      </BasicTable>
    </a-card>
  </div>
</template>

<script setup>
import { postClientUserDetail, postFinancialBillOrderPage } from "@/api/common";
const route = useRoute();
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "服务时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "订单套餐",
    dataIndex: "packageName",
    key: "packageName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "订单编号",
    dataIndex: "orderNo",
    key: "orderNo",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "门店名称",
    dataIndex: "shopName",
    key: "shopName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "商户",
    dataIndex: "shopUserName",
    key: "shopUserName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "商户联系电话",
    dataIndex: "shopUserPhone",
    key: "shopUserPhone",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "订单状态",
    dataIndex: "status",
    key: "status",
    width: "150px",
    ellipsis: true,
    customRender: (record) =>
      `${
        record.status == 0
          ? "使用中"
          : record.status == 1
          ? "紧急停机"
          : record.status == 2
          ? "待评价"
          : "已完成"
      }`,
  },
];
const basicTableRef = ref(null);
const queryData = reactive({});
const detail = ref({});
onMounted(() => {
  queryData.clientUserId = route.query.id;
  basicTableRef.value.fetch();
  postClientUserDetail({
    id: route.query.id,
  }).then((res) => {
    detail.value = res.data;
  });
});
</script>

<style lang="less" scoped>
.msg-list {
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-left: 24px;
  .label {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    width: 100px;
    margin-right: 20px;
    // text-align-last: justify;
  }
  .val {
    font-size: 16px;
  }
}
</style>
